<template>
  <div style="width: 100%;min-height: 100vh;">
    <el-card shadow="hover">
      <img src="@/assets/homepage/await.gif">
      <p>正在出票，请等待……</p>
      <span>出票完成后系统会产生通知，您现在也可以</span>
      <div>
        <el-button type="primary" plain @click="continueBuying('next')">继续购票</el-button>
        <el-button type="primary" plain @click="continueBuying(('goBack'))">返回列表</el-button>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getRotation } from '@/api/order'
export default {
  name: 'Await',
  props: {
    uid: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      Uid: this.uid,
      timer: null
    }
  },
  created() {
    // this.Uid = this.$route.query.uid
    getRotation(this.uid).then()
    var time = 0
    this.timer = setInterval(() => {
      getRotation(this.Uid).then((res) => {
        const status = res.data.data.status_display
        console.log('123456')
        time = time + 5000
        if (
          time === 600000 ||
                status === 'NORMAL' ||
                status === 'REFUND'
        ) {
          switch (status) {
            case 'NORMAL':
              this.$router.push({ path: '/order/details?id=' + this.Uid })
              console.log('轮训成功')
              break
            case 'REFUND':
              this.$emit('updataBuyStatus', 'REFUND')
              break
          }
          clearInterval(this.timer)
        }
      })
    }, 5000)
  },
  methods: {
    continueBuying(data) {
      clearInterval(this.timer)
      if (data === 'next') {
        this.$emit('continueBuying')
      } else {
        this.$router.push({ path: '/travel/ticket/oneDay/calendar' })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-card {
  width: 100%;
  min-height: 100vh;
  text-align: center;
  img {
    width: 258px;
    margin-top: 100px;
  }
  p {
    margin-top: 0;
    font-size: 20px;
    color: #999999;
  }
  span {
    display: block;
    margin-top: 120px;
    font-size: 16px;
    color:  #999999 ;
  }
  .el-button{
    margin-top: 20px;
    margin-right: 40px;
    margin-left: 40px;
  }
}
</style>
